<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Three.js MMDLoader app Post processing Low resolution</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #fff;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				color: #000;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				display:block;
			}
			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
		</style>
	</head>

	<body>
		<script id="vertexShader" type="x-shader/x-vertex">
			varying vec2 vUv;

			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
		</script>

		<script id="fragmentShader" type="x-shader/x-fragment">
			varying vec2 vUv;

			uniform float strength;
			uniform sampler2D tDiffuse;

			void main() {
				float n = 50.0 / strength;
				gl_FragColor = texture2D( tDiffuse, floor( vUv * n ) / n );
			}
		</script>

		<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - MMDLoader app Post processing Low resolution<br />
		<a href="https://github.com/takahirox/MMDLoader-app#readme" target="_blank">MMD Assets license</a><br />
		Copyright
		<a href="http://threejs.org" target="_blank">three.js</a>
		<a href="http://www.geocities.jp/higuchuu4/index_e.htm" target="_blank">Model Data</a>
		<a href="http://www.nicovideo.jp/watch/sm13147122" target="_blank">Dance Data</a>
		<a href="http://www.nicovideo.jp/watch/sm19168559" target="_blank">Original Camera Data(I've customized this)</a>
		</div>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/build/three.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/libs/mmdparser.min.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/libs/ammo.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/loaders/TGALoader.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/loaders/MMDLoader.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/effects/OutlineEffect.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/animation/CCDIKSolver.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/animation/MMDPhysics.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/postprocessing/EffectComposer.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/postprocessing/ShaderPass.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/shaders/CopyShader.js"></script>

		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/Detector.js"></script>
		<script src="https://rawcdn.githack.com/mrdoob/three.js/r87/examples/js/libs/dat.gui.min.js"></script>

		<script>

			var container;

			var mesh, camera, scene, renderer, effect;
			var helper;
			var shaderPass, composer;

			var ready = false;

			var clock = new THREE.Clock();

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

				// scene

				scene = new THREE.Scene();

				scene.add( new THREE.PolarGridHelper( 30, 10 ) );

				var ambient = new THREE.AmbientLight( 0x444444 );
				scene.add( ambient );

				var directionalLight = new THREE.DirectionalLight( 0x666666 );
				directionalLight.position.set( -1, 1, 1 ).normalize();
				scene.add( directionalLight );

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( new THREE.Color( 0xffffff ) );
				container.appendChild( renderer.domElement );

				effect = new THREE.OutlineEffect( renderer );

				var copyShader = new THREE.ShaderPass( THREE.CopyShader );
				copyShader.renderToScreen = true;

				shaderPass = new THREE.ShaderPass(
					{
						uniforms: {
							strength: { value: 0.5 },
							tDiffuse: { value: null }
						},
						vertexShader: document.getElementById( 'vertexShader' ).textContent,
						fragmentShader: document.getElementById( 'fragmentShader' ).textContent
					}
				);
				shaderPass.renderToScreen = true;

				composer = new THREE.EffectComposer( renderer );
				composer.setSize( window.innerWidth, window.innerHeight );
				composer.addPass( shaderPass );

				// model

				var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round(percentComplete, 2) + '% downloaded' );
					}
				};

				var onError = function ( xhr ) {
				};

				// see the license https://github.com/takahirox/MMDLoader-app#readme for these assets
				var modelFile = 'https://rawcdn.githack.com/mrdoob/three.js/r87/examples/models/mmd/miku/miku_v2.pmd';
				var vmdFiles = [ 'https://rawcdn.githack.com/mrdoob/three.js/r87/examples/models/mmd/vmds/wavefile_v2.vmd' ];
				var cameraFiles = [ 'https://rawcdn.githack.com/mrdoob/three.js/r87/examples/models/mmd/vmds/wavefile_camera.vmd' ];

				helper = new THREE.MMDHelper();

				var loader = new THREE.MMDLoader();

				loader.load( modelFile, vmdFiles, function ( object ) {

					mesh = object;

					helper.add( mesh );
					helper.setAnimation( mesh );
					helper.setPhysics( mesh );

					loader.loadVmds( cameraFiles, function ( vmd ) {

						helper.setCamera( camera );

						loader.pourVmdIntoCamera( camera, vmd );
						helper.setCameraAnimation( camera );

						/*
						 * Note: call this method after you set all animations
						 *       including camera and audio.
						 */
						helper.unifyAnimationDuration( {afterglow: 2.0 } );

						scene.add( mesh );

						initGui();

						ready = true;

					}, onProgress, onError );

				}, onProgress, onError );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function initGui() {

				var gui = new dat.GUI();

				var params = {
					strength: 0.5
				};

				gui.add( params, 'strength', 0.001, 1.0 ).onChange( function( value ) {
					shaderPass.material.uniforms.strength.value = params.strength;
				});

				gui.open();

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				effect.setSize( window.innerWidth, window.innerHeight );
				composer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				render();

			}

			function render() {

				if ( ready ) {

					helper.animate( clock.getDelta() );

				}

				effect.render( scene, camera, composer.readBuffer );
				composer.render();

			}

		</script>

	</body>
</html>
